<template>
    <trend-icon v-if="column.displayType === 'trend'" :displayInfo="column.displayInfo.trend" :text="text" />
    <listProgress
        v-else-if="column.displayType === 'progress'"
        :displayInfo="column.displayInfo.progress"
        :text="text"
    />
    <status-icon v-else-if="column.displayType === 'status'" :displayInfo="column.displayInfo.status" :text="text" />
    <span v-else :title="text" class="tableWrapper-text" :style="textStyle()">
        {{ formatText }}
    </span>
</template>
<script>
    import { computed, defineComponent } from 'vue'
    import TrendIcon from '@/components/table/TrendIcon.vue'
    import StatusIcon from '@/components/table/StatusIcon.vue'
    import listProgress from '@/components/table/listProgress.vue'
    import { FormComponentKey } from '@/enums/componentKey'
    import dayjs from 'dayjs'
    export default defineComponent({
        name: 'FormatTableColumn',
        components: {
            TrendIcon,
            StatusIcon,
            listProgress
        },
        props: {
            //列信息
            column: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            //内容
            text: {
                type: Object || String
            }
        },
        setup(props) {
            const alignType = {
                ALIGN_LEFT: 'left',
                ALIGN_CENTER: 'center',
                ALIGN_RIGHT: 'right'
            }
            const textStyle = () => {
                const item = props.column.displayInfo?.text?.contentStyle
                if (!item) {
                    return
                }
                const { fontSize = 14, color = '#000', bold, italic, underline, align = 'left' } = item
                return {
                    fontSize: `${fontSize}px`,
                    color,
                    textAlign: alignType[align],
                    display: 'inline-block',
                    width: '100%',
                    fontWeight: bold ? 'bold' : 'normal',
                    textDecoration: underline ? 'underline' : 'none',
                    fontStyle: italic ? 'italic' : 'initial'
                }
            }
            
            const formatText = computed(() => {
                const { componentKey, format } = props.column.blocks || {}
                let html = props.text
                if (
                    [
                        FormComponentKey.AntdRadioGroupFormPc,
                        FormComponentKey.AntdCheckboxGroupFormPc,
                        FormComponentKey.AntdSelectFormPc, 
                        FormComponentKey.AntdSelectCheckFormPc,
                        FormComponentKey.AntdCascadeFormPc,
                        FormComponentKey.AntdTreeSelectFormPc,
                        FormComponentKey.AlUserFormPc,
                        FormComponentKey.AlDepartmentFormPc,
                    ].includes(componentKey)
                ) {
                    return getCheckName()
                }
                switch (componentKey) {
                    case FormComponentKey.AntdDatePickerFormPc:
                        html = dayjs(props.text).format(format.value || 'YYYY-MM-DD HH:mm:ss')
                        break
                    //  日期区间
                    case FormComponentKey.AntdRangePickerFormPc:
                        const [start, end] = props.text || []
                        if (start && end) {
                            html = `${dayjs(start).format(format.value||'YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(end).format(format.value||'YYYY-MM-DD HH:mm:ss')}`
                        }
                        break;
                    case FormComponentKey.AlSerialNumberFormPc:
                        html = props.text
                        break
                    case FormComponentKey.AlAddressFormPc: //地址
                        html = props.text.address?.join('-') + '-' + props.text?.detail;
                        break
                }
                return html
            })
            const getCheckName = () => {
                let html = [];
                //自定义
                const { text } = props;
                let optionValues = [];
                // 复选框返回的值是数组，要进行处理
                if (text && Array.isArray(text)) {
                    optionValues = text;
                } else {
                    optionValues = [text];
                }
                optionValues.map((item) => {
                    if (item) {
                        html.push(item.title ?? item.label ?? item.name ?? '');
                    }
                });
                return html.join(',');
            }
            return {
                textStyle,
                formatText
            }
        }
    })
</script>
